<template>
    <div class="footer" v-if="$route.meta.footer">
        <mt-tabbar v-model="selected" fixed>
            <mt-tab-item id="index" @click.native="jumpToNeed">
                <p class="iconfont" :class="selected == 'index'?'icon-waimai-tab-xuanzhong_huaban':'icon-waimai-tab-weixuanzhong_huaban'"></p>
                <p class="footer-title">外卖</p>
            </mt-tab-item>
            <mt-tab-item id="orderList" @click.native="jumpToNeed">
                <p class=" iconfont" :class="selected == 'orderList'?'icon-dingdan-tab-xuanzhong_huaban':'icon-dingdan-tab-weixuanzhong_huaban'"></p>
                <p class="footer-title">订单</p>
            </mt-tab-item>
            <mt-tab-item id="user" @click.native="jumpToNeed">
                <p class="iconfont" :class="selected == 'user'?'icon-wode-tab-xuanzhong_huaban':'icon-wode-tab-weixuanzhong_huaban'"></p>
                <p class="footer-title">我的</p>
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>
<script>
export default {
    name:"Footer",
    data() {
        return {
            selected:'index'
        }
    },
    created(){
        this.selected = this.$route.name;
    },
    methods:{
        jumpToNeed(){
            // console.log(this.selected);
            if(this.$route.name === this.selected) return;
            this.$router.push({path:`/${this.selected}`})

        }
    }
}
</script>
<style scoped>
    .footer{
        height: 4rem;
    }
    .iconfont {
        font-size: 1.4rem;
        margin: 0.5rem 0;
    }
    .footer-title {
        height: 3rem;
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .mint-tabbar > .mint-tab-item.is-selected{
        color: #F23D3D;
    }
</style>